<template>
	<view class="Couposns">
		<view class="" v-for="item in allData">
				<view class="cobox" v-if="compareDate(item.ticketTime,getNowDate())">
					<view class="yan">
					</view>
					<view class="col background1">
						<text>￥</text>
						<text>{{item.denomination}}</text>
					</view>
					<view class="cor">
						<view class="cor-1">
							<view>{{item.ticketName}}</view>
							<view>推荐好友购买获得</view>
							<view>
								<text>有效期至：</text>
								<text>{{item.ticketTime}}</text>
							</view>
						</view>
						<view class="cor-2">
							<button @click="sy">立即使用</button>
						</view>
					</view>
				</view>
				<view class="cobox" v-else>
					<view class="yan">
					</view>
					<view class="col caa">
						<text>￥</text>
						<text>{{item.denomination}}</text>
					</view>
					<view class="cor">
						<view class="cor-1">
							<view>{{item.ticketName}}</view>
							<view>推荐好友购买获得</view>
							<view>
								<text>有效期至：</text>
								<text>{{item.ticketTime}}</text>
							</view>
						</view>
						<view class="cbd">
							<text>已过期</text>
						</view>
					</view>
				</view>
		</view>
		
		
	</view>
</template>

<script setup>
	import http from "@/utils/http.js"
	import {
		ref,
		onMounted
	} from "vue"
	let allData = ref([])
	const sy=function(){
		uni.switchTab({
			url:"/pages/Popular-courses/Popular-courses"
		})
	}
	const getNowDate = function() {
		var myDate = new Date;
		var year = myDate.getFullYear(); //获取当前年
		var mon = myDate.getMonth() + 1; //获取当前月
		var date = myDate.getDate(); //获取当前日
		var hours = myDate.getHours(); //获取当前小时
		var minutes = myDate.getMinutes(); //获取当前分钟
		var seconds = myDate.getSeconds(); //获取当前秒
		var now = year + "-" + mon + "-" + date; //+ " " + hours + ":" + minutes + ":" + seconds;
		return now;
	}
	const compareDate = function(date1, date2) {
		var oDate1 = new Date(date1);
		var oDate2 = new Date(date2);
		if (oDate1.getTime() > oDate2.getTime()) {
			return true; //第一个大
		} else {
			return false; //第二个大
		}
	}
	onMounted(() => {
		http({
			url: '/Sticket/query',
			params: {
				wechatName: "小瓶盖"
			}
		}).then((res) => {

			allData.value = res.data
			console.log(allData.value);
		})
		console.log(getNowDate());
		console.log(compareDate("2022-11-19",getNowDate()));
		
	})
</script>

<style lang="less" scoped>
	.Couposns {
		padding: 0 44rpx;
	}

	.cobox {
		width: 664rpx;
		height: 192rpx;
		display: flex;
		overflow: hidden;
		border-radius: 8rpx;
		position: relative;
		margin: 44rpx 0;
		box-shadow: 0 0 10rpx #F2F2F2;

		.yan {
			width: 28rpx;
			height: 28rpx;
			border-radius: 50%;
			background-color: #fff;
			position: absolute;
			top: calc(50% - 14rpx);
			left: -14rpx
		}

		.background1 {
			background: linear-gradient(90deg, rgba(102, 153, 255, 1) 0%, rgba(102, 153, 255, 1) 0%, rgba(102, 51, 255, 1) 100%, rgba(102, 51, 255, 1) 100%);
		}

		.caa {
			background-color: #cccccc;
		}

		.col {
			width: 192rpx;
			height: 192rpx;
			line-height: 192rpx;
			text-align: center;
			color: #fff;

			text:nth-child(1) {
				font-weight: 400;
				font-style: normal;
				font-size: 40rpx;
			}

			text:nth-child(2) {
				font-weight: 700;
				font-style: normal;
				font-size: 72rpx;
			}
		}

		.cor {
			flex: 1;
			display: flex;
			padding: 30rpx;
			font-size: 24rpx;

			.cor-1 {
				display: flex;
				flex-wrap: wrap;
				color: #999999;

				view:nth-child(1) {
					font-weight: 700;
					font-size: 28rpx;
				}
			}

			.cbd {
				width: 184rpx;
				height: 60rpx;
				background-color: #cccccc;
				position: absolute;
				top: 8rpx;
				right: -50rpx;
				transform: rotate(45deg);
				text-align: center;
				line-height: 60rpx;
				box-shadow: 0 0 10rpx #afa4a4;

				text {
					color: #fff;
					font-weight: 700;

				}
			}

			.cor-2 {
				display: flex;
				align-items: center;

				button {
					width: 120rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 48rpx;
					background-color: rgba(239, 179, 54, 1);
					color: #fff;
					padding: 0;
					margin: 0;
					font-size: 24rpx;
					font-weight: 700;
				}
			}
		}



	}
</style>
